<template>
    <popup
        :show="showEdit"
        :title="popTitle"
        :loading="loading"
        :async-close="true"
        width="550px"
        @close="emits('close')"
        @confirm="handleSubmit"
    >
        <el-form
            ref="formRef"
            :model="formData"
            :rules="formRules"
            label-width="80px"
            class="p-3 pb-0"
        >
            <el-form-item label="订阅时长" prop="duration">
                <div class="w-[360px]">
                    <el-input
                        v-model="formData.duration"
                        placeholder="请输入整数"
                        :disabled="formData.calendar === 'perpetual'"
                    >
                        <template #append>
                            <el-select
                                v-model="formData.calendar"
                                :disabled="formData.is_builtin"
                                class="w-[80px]"
                            >
                                <el-option value="day" label="天" />
                                <el-option value="month" label="月" />
                                <el-option value="year" label="年" />
                                <el-option value="perpetual" label="永久" />
                            </el-select>
                        </template>
                    </el-input>
                </div>
            </el-form-item>
            <el-form-item label="销售价格" prop="sell_price">
                <div class="w-[360px]">
                    <el-input
                        v-model="formData.sell_price"
                        :disabled="formData.is_builtin"
                        placeholder="请输入销售价格"
                        clearable
                        :min="0"
                        :max="999999999"
                    />
                </div>
            </el-form-item>
            <el-form-item label="划线价格" prop="line_price">
                <div class="w-[360px]">
                    <el-input
                        v-model="formData.line_price"
                        clearable
                        placeholder="请输入划线价格"
                        :min="0"
                        :max="999999999"
                    />
                </div>
            </el-form-item>
            <el-form-item label="赠送积分" prop="give_points">
                <div class="w-[360px]">
                    <el-input
                        v-model="formData.give_points"
                        clearable
                        placeholder="请输入赠送积分"
                        :min="0"
                        :max="999999999"
                    />
                </div>
            </el-form-item>
            <el-form-item label="定价标签">
                <div class="w-[360px]">
                    <el-input
                        v-model="formData.tags"
                        clearable
                        placeholder="请输入"
                    />
                </div>
            </el-form-item>
            <el-form-item label="是否上架">
                <div class="w-80">
                    <el-switch
                        v-model="formData.is_disable"
                        :disabled="formData.is_builtin"
                        :inactive-value="1"
                        :active-value="0"
                    />
                </div>
            </el-form-item>
        </el-form>
    </popup>
</template>

<script setup lang="ts">
const emits = defineEmits(['success', 'close'])

const formRef = ref()
const showMode = ref<string>('add')
const showEdit = ref<boolean>(false)
const popTitle = computed<string>(() => {
    return showMode.value === 'edit' ? '编辑定价' : '新增定价'
})

// 表单数据
const loading = ref<boolean>(false)
const formData: any = reactive({
    id: 0,             // 套餐ID
    tags: '',          // 价格标签
    calendar: 'month', // 时长类型: [day=日, month=月, year=年, perpetual=永久]
    duration: '',      // 套餐时长
    give_points: '',   // 赠送积分
    sell_price: '',    // 销售价格
    line_price: '',    // 划线价格
    buy_num: 0,        // 购买人数
    sort: 0,           // 排序编号
    is_builtin: 0,     // 系统内置:[0=否, 1=是]
    is_disable: 0      // 是否禁用:[0=否, 1=是]
})

// 表单规则
const formRules: any = reactive({
    calendar: [
        { required: true, message: '请选择时长类型', trigger: ['blur'] }
    ],
    duration: [
        { required: true, message: '请输入套餐时长', trigger: ['blur'] }
    ],
    sell_price: [
        { required: true, message: '请输入销售价格', trigger: ['blur'] }
    ],
    line_price: [
        { required: true, message: '请输入划线价格', trigger: ['blur'] }
    ]
})

/**
 * 提交表单
 */
const handleSubmit = async (): Promise<void> => {
    await formRef.value?.validate().then(() => {
        loading.value = true
        emits('success', {
            type: showMode.value,
            row: unref(formData)
        })
        emits('close')
    }).catch(() => {})
}

/**
 * 打开表单
 *
 * @param {string} type
 * @param {any} value
 * @returns {Promise<void>}
 */
const open = async (type: string, value?: any): Promise<void> => {
    showMode.value = type
    showEdit.value = true
    if (type === 'edit') {
        Reflect.ownKeys(unref(formData)).forEach((item) => {
            formData[item] = value[item]
        })
    }
}

defineExpose({
    open
})
</script>
